<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>BB-8机器人控制测试与转发工具</title>
	<script src="./node_modules/jquery/dist/jquery.min.js"></script>
	<style>
		#snippet {
			/* float: left; width: 30em; */
			padding: 1em;
			background: #500;
			border-width: 1px;
			border-style: solid;
			border-color: #400 #700 #700 #400;
		}

		#snippet pre {
			margin: 0;
		}

		#snippet pre code {
			display: block;
			height: 19em;
			padding: 1em;
			overflow-y: auto;
			overflow-x: hidden;
		}
	</style>
</head>

<body>
	<script type="text/javascript">
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}

		function putMessage(info, end = true) {
			var val = $('#responseText').val();
			var sep = ""
			if (val.length > 0 && end) {
				sep = "\n"
			}
			$('#responseText').val(val + sep + info);
			$('#responseText').scrollTop($('#responseText').prop("scrollHeight"));
		}

		function openServer() {
			var host_port = $('input[name=host_port]').val();
			if (window.WebSocket) {
				if (socket && socket.readyState == WebSocket.OPEN) {
					putMessage("连接已经开启");
					return;
				}
				socket = new WebSocket(host_port, "web");
				socket.onmessage = function (event) {
					putMessage('\n接收：' + event.data, false);
					try {
						var json = JSON.parse(event.data);
						// putMessage(JSON.stringify(json));
					} catch (e) {
						console.log("JSON解析错误");
					}
				};
				socket.onopen = function (event) {
					putMessage("连接开启");
				};
				socket.onclose = function (event) {
					putMessage("连接被关闭");
					socket.close();
				};
			} else {
				putMessage("你的浏览器不支持 WebSocket！");
			}
		}

		function closeServer() {
			if (socket && socket.readyState == WebSocket.OPEN) {
				socket.close();
			} else {
				putMessage("连接已经关闭");
			}
		}

		function message_send(message) {
			if (!window.WebSocket) {
				return;
			}
			if (socket && socket.readyState == WebSocket.OPEN) {
				putMessage('\n发送：' + message);
				socket.send(message);
			} else {
				putMessage("连接没有开启");
			}
		}


		$(document).ready(function () {
			var host = window.location.href.replace(/^.*?\/\/([^\/:\?]+).*?$/, '$1');
			var port = window.location.href.replace(/^.*?\/\/([^\/:\?]+):(\d+).*?$/, '$2');
			$('input[name=host_port]').val('ws://' + host + ':' + port + '/');

			$('input._send_button').click(function () {
				$('input[name*=message]').each((n, i) => {
					$(i).css("border-color", "gray");
				});
				var inputObj = $(this).parent().find('input[type=text][name*=message]');
				var name = $(inputObj).attr('name');
				var val = $(inputObj).val();

				message_send(val);
				$(inputObj).css("border-color", "red");
			});

			$('input[name*=message]').each((n, i) => {
				$(i).css("border-color", "gray");
			});

			var newDate = '';
			getLangDate();

			function dateFilter(date) { //值小于10时，在前面补0
				if (date < 10) {
					return "0" + date;
				}
				return date;
			}

			function getLangDate() {
				var dateObj = new Date(); //表示当前系统时间的Date对象
				var year = dateObj.getFullYear(); //当前系统时间的完整年份值
				var month = dateObj.getMonth() + 1; //当前系统时间的月份值
				var date = dateObj.getDate(); //当前系统时间的月份中的日
				var day = dateObj.getDay(); //当前系统时间中的星期值
				var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
				var hour = dateObj.getHours(); //当前系统时间的小时值
				var minute = dateObj.getMinutes(); //当前系统时间的分钟值
				var second = dateObj.getSeconds(); //当前系统时间的秒钟值
				var timeValue = "" + ((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午"); //当前时间属于上午、晚上还是下午
				newDate = dateFilter(year) + "-" + dateFilter(month) + "-" + dateFilter(date) + " " + dateFilter(
					hour) + ":" + dateFilter(minute) + ":" + dateFilter(second);
				document.getElementById("nowTime").innerHTML = newDate + "　" + week;
				setTimeout(getLangDate, 1000);
			}
		});
	</script>
	<form onsubmit="return false;">
		<h3>BB-8机器人控制测试与转发工具：
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span id="nowTime" style="font-size:13px;"></span>
		</h3>

		<textarea id="responseText" style="width: 800px; height: 350px;"></textarea>
		<br>
		服务：<input type="text" name="host_port" style="width: 480px" value='ws://127.0.0.1:1234/'>
		<input type="button" onclick="openServer()" value="连接">
		<input type="button" onclick="closeServer()" value="断开">
		<input type="button" onclick="$('#responseText').val('');" value="清空记录">
		<br>
		<span>
			向前：<input type="text" name="message1" style="width: 670px" value='{"action":"move","x":150,"y":50,"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>
		<br>
		<span>
			向后：<input type="text" name="message1" style="width: 670px" value='{"action":"move","x":150,"y":250,"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>
		<br>
		<span>
			向左：<input type="text" name="message1" style="width: 670px" value='{"action":"move","x":50,"y":150,"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>
		<br>
		<span>
			向右：<input type="text" name="message1" style="width: 670px" value='{"action":"move","x":250,"y":150,"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>						
		<br>
		<span>
			红灯：<input type="text" name="message2" style="width: 670px" value='{"action":"color","c":[255,0,0],"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>
		<br>
		<span>
			绿灯：<input type="text" name="message2" style="width: 670px" value='{"action":"color","c":[0,255,0],"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>
		<br>
		<span>
			蓝灯：<input type="text" name="message2" style="width: 670px" value='{"action":"color","c":[0,0,255],"target":"BB-8"}'>
			<input type="button" class="_send_button" value="发送消息">
		</span>				
	</form>
</body>

</html>